<script setup lang="ts">
import { reactive } from "vue";
import risk from "./components/risk.vue"
import screen from "./components/screen.vue"
import { useRisk } from "./useRisk"
import navBar from "../../components/layout/navBar.vue"
import tavMenu from "../../components/layout/tabMenu.vue"
import search from "../../components/search/search.vue"

const props = defineProps<{}>()
const emit = defineEmits([])
const initData = reactive({} as any)
const {
  onLand,
  loading,
  finished,
  risktList,
  value,
  showPopup,
  onSearch,
  onCancel,
  myScreen,
  outputData
} = useRisk(props, initData, emit)

</script>
<template>
  <div class="listMain">
    <navBar left="N" right="Y" title="提示信息"></navBar>
    <tavMenu selectMenu="riskInfo"></tavMenu>
    <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    <van-row class="tool">
      <search />
      <van-col class="a" span="6">
        <van-button  icon="filter-o" class="screen" @click="showPopup">筛选</van-button>
      </van-col>
    </van-row>
    <screen ref="myScreen" @determine='outputData'></screen>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLand">
      <risk :data="risktList"></risk>
    </van-list>
  </div>
</template>
<style scoped>
.listMain {
  /* background-color: rgb(66, 141, 228); */
  display: flex;
  flex-direction: column;
}
.tool {
  height: 46px;

  display: flex;
}
:deep(.van-search) {
  margin-left: 10px;
  margin-top: 15px;
  width: 95%;
  border-radius: 20px;
  padding: 0;
}
:deep(.van-search__content) {
  border-radius: 20px;
}
:deep(.van-search__action) {
  border-radius: 20px;
}
.screen {
  /* background-color: rgb(66, 141, 228); */
  border: none;
  height: 44px;
  position: absolute;
  right: 10px;
}
</style>